<template>
  <div class="city-filter-list">
    <ul v-show="passMusterCities.length">
      <li class="list-item" v-for="city in passMusterCities" :key="city.cityId" @click="getCityId(city)">
        {{ city.name }}
      </li>
    </ul>
    <div v-show="!passMusterCities.length" class="noCity">
      <div class="bg">
        <img src="~assets/img/nocity.png" alt="" />
        <span>没有找到匹配的城市</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityFilterList',
  props: {
    passMusterCities: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    getCityId(city) {
      this.$emit('getCityId', city)
    }
  }
}
</script>

<style lang="scss" scoped>
.city-filter-list {
  background: #fff;
  .list-item {
    padding-left: 0.15rem;
    height: 0.44rem;
    border-bottom: 0.5px solid #eee;
    line-height: 00.44rem;
  }
  .noCity {
    height: calc(100vh - 0.93rem);
    width: 100%;
    background: white;
    .bg {
      transform: translateY(1.07rem);
      height: 1.15rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      img {
        height: 0.9rem;
        width: 0.9rem;
      }
      span {
        color: #bdc0c5;
        font-size: 14px;
      }
    }
  }
}
</style>